import React from 'react'

import {userLink, userLink_active} from './../../styles'
import {Route, NavLink, Switch, Redirect} from 'react-router-dom'
import LazyRoute from './../../LazyRoute'

import BaseInfo from 'bundle-loader?lazy!./BaseInfo'
import DriveLicense from 'bundle-loader?lazy!./DriveLicense'
import Cars from 'bundle-loader?lazy!./Cars'
import CarUses from 'bundle-loader?lazy!./CarUses'
import Orders from 'bundle-loader?lazy!./Orders'
import Exports from 'bundle-loader?lazy!./Exports'

const RouteConfig = [
    {
        path: '/baseinfo',
        name: '基本信息',
        component: BaseInfo
    },
    {
        path: '/drivelicense',
        name: '驾驶证信息',
        component: DriveLicense
    },
    {
        path: '/cars',
        name: '座驾信息',
        component: Cars
    },
    {
        path: '/caruses',
        name: '座驾使用信息',
        component: CarUses
    },
    {
        path: '/orders',
        name: '订单信息',
        component: Orders
    },
    {
        path: '/exports',
        name: '推广信息',
        component: Exports
    }
];

const Users = ({match})=> {
    return (
        <div>
            <div>
                {RouteConfig.map(function (route, index) {
                    return <NavLink style={userLink} activeStyle={userLink_active} key={index}
                                    to={`${match.url}${route.path}`}>{route.name}</NavLink>
                })}
            </div>
            <Switch>
                {RouteConfig.map(function (route, index) {
                    return <LazyRoute key={index} path={`${match.url}${route.path}`} component={route.component}/>
                })}
                <Redirect to={`${match.url}/baseinfo`}/>
            </Switch>
        </div>
    );
}

export default Users;

